<div class="modal-header">
    <h3 class="modal-title"><b style="color: #286090">ECS Template(InstanceTypes)</b></h3>
</div>
<div class="modal-body">
    <div style="margin-top: 5px;">
        <form class="form-horizontal">
            <div class="form-group ">

                <div class="col-md-6">
                    <label class="col-lg-4 control-label">RegionId</label>
                    <div class="col-lg-8">
                        <select class="form-control" ng-model="regronId.selected" ng-change="doQuery()"
                                ng-options="regronId as regronId for regronId in regronIds" required>
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>

                <!--<div class="col-md-6">-->
                    <!--<button type="button" ng-show="regronId !=null && regronId != ''" class="btn btn-info"-->
                            <!--ng-click="doQuery()"><span-->
                            <!--class="glyphicon glyphicon-search"></span>查询InstanceTypes-->
                    <!--</button>-->
                <!--</div>-->

            </div>

            <div class="form-group" ng-show="zones != null && zones.length != 0">
                <div class="col-md-6">
                    <label class="col-lg-4 control-label">ZoneId</label>
                    <div class="col-lg-8">
                        <select class="form-control" ng-model="zone.selected" ng-change="zoneSelected()"
                                ng-options="z as z.localName for z in zones" required>
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>

            </div>

            <div class="form-group" ng-show="zone.selected != null">
                <div class="col-md-6">
                    <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>模版名称</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="名称"
                               ng-model="template.name">
                    </div>
                </div>
            </div>

            <div class="form-group" ng-show="zone.selected != null">
                <div class="col-md-6">
                    <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>实例规格</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="instanceType" readonly
                               ng-model="template.instanceType">
                    </div>
                </div>
                <!--<div class="col-md-6">-->
                    <!--<label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>网络类型</label>-->
                    <!--<div class="col-lg-8">-->
                        <!--<input type="text" class="form-control" placeholder="网络支持的类型（经典网络/VPC）" readonly-->
                               <!--ng-model="template.networkSupport">-->
                    <!--</div>-->
                <!--</div>-->

                <div class="col-md-6">
                    <label class="col-lg-4 control-label">IO优化实例</label>
                    <div class="col-lg-8">
                        <select class="form-control" ng-model="template.ioOptimized"
                                ng-options="io.type as io.name for io in ioList" required>
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
            </div>

            <div class="form-group" ng-show="zone.selected != null">
                <div class="col-md-6">
                    <label class="col-lg-4 control-label">CPU</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="cpu核心数" readonly
                               ng-model="template.cpu">
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="col-lg-4 control-label">Memory(GB)</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="网络支持的类型（经典网络/VPC）" readonly
                               ng-model="template.memory">
                    </div>
                </div>
            </div>

            <div class="form-group" ng-show="zone.selected != null">
                <div class="col-md-6">
                    <label class="col-lg-4 control-label"
                           uib-popover-html="'磁盘类型：普通云盘cloud，高效云盘cloud_efficiency，SSD云盘cloud_ssd，本地SSD盘ephemeral_ssd'" popover-trigger="'mouseenter'"
                    ><span style="color: #ec2121;">*</span>系统盘类型</label>
                    <div class="col-lg-8">
                        <select class="form-control" ng-model="template.systemDiskCategory"
                                ng-options="dc as dc for dc in zone.selected.availableDiskCategories" required>
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>系统盘容量</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="系统盘默认容量"
                               ng-model="template.systemDiskSize">
                    </div>
                </div>

            </div>


            <div class="form-group" ng-show="zone.selected != null">
                <div class="col-md-6" ng-show="zone.selected != null">
                    <label class="col-lg-4 control-label"
                           uib-popover-html="'磁盘类型：普通云盘cloud，高效云盘cloud_efficiency，SSD云盘cloud_ssd，本地SSD盘ephemeral_ssd'" popover-trigger="'mouseenter'"
                    ><span style="color: #ec2121;">*</span>数据盘类型</label>
                    <div class="col-lg-8">
                        <select class="form-control" ng-model="template.dataDisk1Category"
                                ng-options="dc as dc for dc in zone.selected.availableDiskCategories" required>
                            <option value="">--请选择--</option>
                        </select>
                    </div>
                </div>
                <div class="col-md-6">
                    <label class="col-lg-4 control-label"><span style="color: #ec2121;">*</span>数据盘容量</label>
                    <div class="col-lg-8">
                        <input type="text" class="form-control" placeholder="数据盘默认容量"
                               ng-model="template.dataDiskSize">
                    </div>
                </div>
            </div>


            <table class="table table-hover table-bordered table-striped" ng-show="pageData != null && pageData.length != 0">
                <thead>
                <tr>
                    <td><b style="color: #286090">instanceTypeFamily</b></td>
                    <td><b style="color: #286090">instanceTypeId</b></td>
                    <td><b style="color: #286090">Cpu</b></td>
                    <td><b style="color: #286090">Memory(GB)</b></td>
                    <td><b style="color: #286090">操作</b></td>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="type in pageData">
                    <td>
                        {{type.instanceTypeFamily}}
                    </td>
                    <td>
                        {{type.instanceTypeId}}
                    </td>
                    <td>
                        {{type.cpuCoreCount}}
                    </td>
                    <td>
                        {{type.memorySize}}
                    </td>
                    <td>
                        <button ng-click="addTypeItem(type)"
                                class="btn btn-xs"
                                style="margin-left: 20px; background-color: #00a8f3; color: white;">
                            <span class="glyphicon glyphicon-plus"></span>选择
                        </button>
                    </td>
                </tr>
                </tbody>
                <tfoot>
                <tr>
                    <td colspan="11">
                        <ul style="margin: 0px; float: right;" uib-pagination
                            total-items="totalItems" ng-model="currentPage"
                            items-per-page="pageLength" max-size="10"
                            ng-change="pageChanged(currentPage)" previous-text="&lsaquo;"
                            next-text="&rsaquo;"></ul>
                    </td>
                </tr>
                </tfoot>
            </table>
        </form>
    </div>

    <div ng-if="alert.type != ''">
        <div uib-alert ng-class="'alert-' + alert.type" close="closeAlert()">{{alert.msg}}</div>
    </div>

    <!--按钮-->
    <div class="form-group">

        <div style="text-align:center;">

            <button ng-click="saveTemplate()" ng-show="zone.selected != null"
                    class="btn btn-xs"
                    style="margin-left: 20px; background-color: #2e6da4; color: white;">
                <span class="glyphicon glyphicon-plus"></span>保存
            </button>


            <button ng-click="closeModal()"
                    class="btn btn-xs"
                    style="margin-left: 20px; background-color: #d78700; color: white;">
                <span class="glyphicon glyphicon-remove"></span>关闭
            </button>


        </div>
    </div>


</div>